<extend name="Public/base"/>
<block name="head">
	 <link rel="stylesheet" type="text/css" href="__CSS__/avatar.css">
	 <script type="text/javascript" charset="utf-8" src="__STATIC__/ext/webuploader/js/webuploader.js"></script>
	 <link href="__STATIC__/ext/webuploader/css/webuploader.css" type="text/css" rel="stylesheet">
	 <style>
        .jcrop-holder > div > div {
            border-radius: 100%;
        }
        .jcrop-holder img {
            max-width: none;
        }
        .jcrop-holder .avatar_select{margin-top: -10px;margin-left: -10px;}
    </style>
</block>

<block name="body">
<div class="container user-center">
    <div class="row">
	    <div class="col-md-2">
	         <include file="Public:usernav"/>
	    </div>
	       		<div class="col-md-10">  


			<div style="height: 600px;">
			<div id="uploader-demo">
			    <!--用来存放item-->
			    <div id="fileList" class="uploader-list"></div>
			    <div id="upload_avatar_{$my['uid']}" style="padding: 20px 0">选择图片</div>
			
			    <div class="show_avatar">
			
			        <div class="col-xs-4 avatar_select" >
			            <div id="avatar_{$my['uid']}_original">
			                <img class="avatar-img"  src="{$my.avatar|default='__IMG__/default_avatar.jpg'}" style=""/>
			
			
			            </div>
			
			            <div class="pull-left avatar_256 text-center avatar_select" id="avatar_{$my['uid']}_256" style="padding-bottom: 49px;">
			                <div class="" style="margin-bottom: 20px;">
			                    <img class="avatar-img"  src="{$my.avatar|default='__IMG__/default_avatar.jpg'}">
			
			                </div>
			                <p>大尺寸头像</p>
			                <p> 256*256</p>
			            </div>
			           <!--   <div class="pull-left avatar_128 text-center avatar_select" id="avatar_{$my['uid']}_128" style="">
			                <div class="" style="margin-bottom: 20px;">
			                    <img class="avatar-img"  src="{$my.avatar128|default='__IMG__/default_avatar_128_128.jpg'}">
			
			                </div>
			                <p>中尺寸头像</p>
			                <p> 128*128</p>
			
			
			            </div>
			            <div class="pull-left avatar_64 text-center avatar_select" id="avatar_{$my['uid']}_64" style="padding: 10px 41px;">
			                <div class="" style="margin-bottom: 20px;">
			                    <img class="avatar-img" src="{$my.|default='__IMG__/default_avatar_64_64.jpg'}">
			
			                </div>
			                <p style="width: 66px;">小尺寸头像</p>
			                <p>64*64</p>
			
			            </div>
			-->
			
			
			            <input class="btn btn-default avatar_btn" data-role="avatar_btn"  type="button" value="保存头像"/>
			        </div>


			</div>
    </div>
</div>

<link rel="stylesheet" type="text/css" href="__STATIC__/jcrop/jquery.Jcrop.css"/>
<script src="__STATIC__/jcrop/jquery.Jcrop.js"></script>
<script src="__STATIC__/browser/jquery.browser.js"></script>
	</div>	
</div>
</block>
<block name="script">
<script type="text/javascript">
$(function () {
    var crop;
    var jcrop_api;
    var ext;
    var boundx, boundy,
            $preview = $('.avatar_256'),
            $preview_128 = $('.avatar_128'),
            $preview_64 = $('.avatar_64'),
            $pcnt = $('.avatar_256 div'),
            $pimg = $('.avatar_256 div img'),
            $pcnt_128 = $('.avatar_128 div'),
            $pimg_128 = $('.avatar_128 div img'),
            $pcnt_64 = $('.avatar_64 div'),
            $pimg_64 = $('.avatar_64 div img');
    var path;
    var uploader_{$my['uid']}= WebUploader.create({
        // 选完文件后，是否自动上传。
        auto: true,
        // swf文件路径
        swf: 'Uploader.swf',
        // 文件接收服务端。
        server: "{:U('File/uploadAvatar',array('uid'=>$my['uid']))}",
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#upload_avatar_{$my["uid"]}',
        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    });
    uploader_{$my['uid']}.on('fileQueued', function (file) {
        uploader_{$my['uid']}.upload();
       
    });
    /*上传成功*/
    uploader_{$my['uid']}.on('uploadSuccess', function (file, ret) {
       
        
        if (ret.status == 0) {
            alert(ret.info);
        } else {
           // $("#avatar_" + "{$my['uid']}" + "_original img").attr('src', ret.data.file.path );
            ext = ret.data.file.ext;
            path = ret.data.file.path;
            var src = ret.data.file.src+'?time='+ret.data.file.time;
            $("#avatar_" + "{$my['uid']}" + "_original").html('');
            $("#avatar_" + "{$my['uid']}" + "_original").html('<img src="'+src+'">');
            $pimg.attr('src', src)
            $pimg_128.attr('src', src)
            $pimg_64.attr('src', src)
            $("#avatar_" + "{$my['uid']}" + "_original img").load(function () {
                $("#avatar_" + "{$my['uid']}" + "_original >img").Jcrop({
                    aspectRatio: 1,
                    onChange: updateCoordinate,
                    onSelect: updateCoordinate,
                    minSize: [10, 10],
                    setSelect: [0, 0, 256, 256],
                    boxWidth:300,
                    boxHeight:300
                }, function () {
                    var bounds = this.getBounds();
                    boundx = bounds[0];
                    boundy = bounds[1];
                    jcrop_api = this;
                    $preview.appendTo(jcrop_api.ui.holder);
                    $preview_128.appendTo(jcrop_api.ui.holder);
                    $preview_64.appendTo(jcrop_api.ui.holder);
                    crop = jcrop_api.tellScaled();
                    updateCoordinate(crop);
                });
            })
            //重置队列
            uploader_{$my['uid']}.reset();
        }
    });
    function updateCoordinate(c) {
        crop = c;       
        if (parseInt(c.w) > 0) {
            var xsize = $pcnt.width();
            var ysize = $pcnt.height();
            var rx = xsize / c.w ;
            var ry = ysize / c.h ;
            $pimg.css({
                width: Math.round(rx * boundx) + 'px',
                height: Math.round(ry * boundy) + 'px',
                marginLeft: '-' + Math.round(rx * c.x) + 'px',
                marginTop: '-' + Math.round(ry * c.y) + 'px'
            });
            var xsize_128 = $pcnt_128.width();
            var ysize_128 = $pcnt_128.height();
            var rx_128 = xsize_128 / c.w;
            var ry_128 = ysize_128 / c.h;
            $pimg_128.css({
                width: Math.round(rx_128 * boundx) + 'px',
                height: Math.round(ry_128 * boundy) + 'px',
                marginLeft: '-' + Math.round(rx_128 * c.x) + 'px',
                marginTop: '-' + Math.round(ry_128 * c.y) + 'px'
            });

            var xsize_64 = $pcnt_64.width() ;
            var ysize_64 = $pcnt_64.height() ;
            var rx_64 = xsize_64 / c.w;
            var ry_64 = ysize_64 / c.h;
            $pimg_64.css({
                width: Math.round(rx_64 * boundx) + 'px',
                height: Math.round(ry_64 * boundy) + 'px',
                marginLeft: '-' + Math.round(rx_64 * c.x) + 'px',
                marginTop: '-' + Math.round(ry_64 * c.y) + 'px'
            });


        }
    }



    $('[data-role=avatar_btn]').click(function(){
        //检查是否已经裁剪过
        if (typeof (crop) == 'undefined') {
            toast.error('请上传头像并裁剪');
            return;
        }
        else{
            var crop2 = crop.x / boundx + ',' + crop.y / boundy + ',' + crop.w / boundx + ',' + crop.h / boundy;
        }
        var uid ='{$my['uid']}';
        //提交到服务器
        var url = "{:U('User/avatar')}";

        $.post(url, {uid: uid, crop: crop2,path:path}, function (data) {
        	if(data.status == 1){
        		if (data.url) {
                    updateAlert(data.info + ' 页面即将自动跳转~','alert-success');
                }else{
                    updateAlert(data.info,'alert-success');
                }
        		setTimeout(function(){
                    if (data.url) {
                        location.href=data.url;
                    }else{
                        location.reload();
                    }
                },1500);
        	}
        	
        });

    })
})
</script>
</block>